<template>
  <div class="bigscreen">
    <!-- 头部盒子 -->
    <div class="head">
      <div class="toManager">
        <el-button @click="toManagerChina" icon="el-icon-s-data" type="primary"
          >点此进入中国大屏</el-button
        >
        <el-button @click="toManagerLogin" icon="el-icon-s-promotion"
          >点此进入后台</el-button
        >
        <el-button
          @click="fullScreen"
          icon="el-icon-full-screen"
          type="info"
          circle
          round
        ></el-button>
      </div>
      <h1>新冠疫情数据大屏（世界）</h1>
      <div class="showTime">现在是{{ nowDate }} 数据更新于6月9日</div>
    </div>
    <!-- 页面主体盒子 -->
    <div class="mainbox">
      <!-- 左边的盒子 -->
      <div class="column">
        <!-- 分成三个盒子 长度不一样 -->
        <div class="panellong countrycovrank">
          <h2>
            累计确诊排名（TOP10）<el-link
              @click="changeWorldDataTableVisible()"
              :underline="false"
              >查看<i class="el-icon-view el-icon--right"></i>
            </el-link>
          </h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panelsmall proportion">
          <h2>占比</h2>
          <div class="chart1"></div>
          <div class="chart2"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panelmid pie">
          <h2>全球疫苗种类</h2>
          <div class="chart">
            <dv-scroll-board :config="newsConfig" />
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 中间的盒子 就是装地图及数据的 -->
      <div class="column">
        <div class="no">
          <div class="no-hd">
            <ul>
              <li class="new">{{ countworlddata[0].diag }}</li>
              <li class="cure">{{ countworlddata[0].cure }}</li>
              <li class="dead">{{ countworlddata[0].dead }}</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>全球累计确诊</li>
              <li>全球累计治愈</li>
              <li>全球累计死亡</li>
            </ul>
          </div>
        </div>
        <!-- 地图数据盒子以及动态图 -->
        <div class="map">
          <div class="chart"></div>
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
        </div>
      </div>
      <!-- 右边的盒子 -->
      <div class="column">
        <div class="panelmid covline">
          <h2>
            美国每日新增趋势
            <el-link @click="changeJpLineVisible()" :underline="false"
              >查看日本<i class="el-icon-view el-icon--right"></i>
            </el-link>
          </h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panellong covworld">
          <h2>
            世界疫苗接种数据（按百人排序）
            <el-link @click="changeVaccMapTableVisible()" :underline="false"
              >地图<i class="el-icon-view el-icon--right"></i>
            </el-link>
          </h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panelsmall water">
          <h2>世界死亡率及疫苗接种率</h2>
          <div class="chart1"></div>
          <div class="chart2"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="'查看详情 数据更新时间：6月9日'"
      :visible.sync="worldDataTableVisible"
    >
      <el-table
        :data="countryrankdata"
        stripe
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        style="width: 100%"
        height="600"
        :default-sort="{ prop: 'count', order: 'descending' }"
      >
        <el-table-column
          property="country"
          label="国家或地区"
          sortable
        ></el-table-column>

        <el-table-column property="count" label="累计确诊" sortable>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.count > 1000000" type="danger">
              {{ scope.row.count }}</el-tag
            >
            <el-tag
              v-if="scope.row.count <= 1000000 && scope.row.count > 100000"
              type="warning"
            >
              {{ scope.row.count }}</el-tag
            >
            <el-tag v-if="scope.row.count <= 100000 && scope.row.count > 3000">
              {{ scope.row.count }}</el-tag
            >
            <el-tag
              v-if="scope.row.count < 3000 && scope.row.count >= 0"
              type="success"
            >
              {{ scope.row.count }}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column
          property="cureCount"
          label="累计治愈"
          sortable
        ></el-table-column>
        <el-table-column
          property="deadCount"
          label="累计死亡"
          sortable
        ></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="查看疫苗数据"
      :visible.sync="worldVaccMapDialogVisible"
      width="90%"
      center
      fullscreen
    >
      <div class="vaccworrldmap">我是疫苗数据</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="worldVaccMapDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="worldVaccMapDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="趋势：日本"
      :visible.sync="jpLineDialogVisible"
      width="80%"
      center
    >
      <div class="jpLine"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="jpLineDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="jpLineDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "./js/world";
import screenfull from "screenfull";
let chart = null;
export default {
  data() {
    return {
      jpLineDialogVisible: false,
      isFullscreen: false,
      worldVaccMapDialogVisible: false,
      worldDataTableVisible: false,
      newsConfig: {
        header: ["国家", "疫苗种类"],
        data: [],
      },
      nowDate: "",
      countryrankdata: [],
      jpcovline: [],
      vaccmapdata: [],
      mapdata: [
        {
          country: "United States of America",
          count: 85214036,
        },
      ],
      countworlddata: [
        {
          diag: 11,
          cure: 11,
          dead: 11,
        },
      ],
      countryrank: [
        {
          country: "美国",
          count: 85214036,
        },
      ],
      usacovline: [
        {
          countryName: "美国",
          new: 14,
          now: 14,
          diagnosed: 14,
          dead: 0,
          cure: 0,
          date: "2020-02-08",
        },
      ],
      vacctable: [
        {
          countryName: "中国",
          dateTime: "2022-05-15 00:00:00",
          vaccineType: "国药/北京",
          inoculateCount: 3358576000,
          inoculateCount100: 233.36,
        },
      ],
      vaccworld: [
        {
          country: "印度",
          count: 1907730016,
          count100: 136.91,
        },
      ],
      vaccrateworld: [
        {
          inorate: 0.55113089,
        },
      ],
    };
  },
  watch: {},
  mounted() {
    this.currentTime();
    this.setOptions();
    this.getcountdata();
    this.drawcountryCovRank();
    this.drawusaline();
    this.drawleftProportion();
    this.drawrightProportion();
    this.getvacctable();
    this.drawWorldVacc();
    this.drawrightWater();
    this.drawleftWater();
    this.init();
  },
  methods: {
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}年${month}月${day}日${hour}:${minute}:${second} ${weekArr[week]}`;
    },
    // 画中间地图的函数
    async setOptions() {
      let { data: res } = await this.$http.post(`bigscreen/mapworlddata`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给cityrankdata赋值
        this.mapdata = res.data.mapdata;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 对数据进行处理
        let maplist = [];
        // 新建数组为Echarts要求的数据格式即可
        for (var i = 0; i < this.mapdata.length; i++) {
          maplist.unshift({
            value: JSON.parse(JSON.stringify(this.mapdata[i])).count,
            name: JSON.parse(JSON.stringify(this.mapdata[i])).country,
          });
        }
        let option = {
          tooltip: {
            triggerOn: "click",
            formatter: function (e, t, n) {
              return 0.5 == e.value
                ? e.name + "：有疑似病例"
                : e.seriesName + "<br />" + e.name + "：" + e.value;
            },
          },
          title: {
            text: this.title,
            top: 50,
            left: "center",
            textStyle: {
              fontWeight: "bolder",
              fontSize: 24,
              color: "#BCBCBF",
            },
          },
          visualMap: {
            min: 0,
            max: 1000,
            left: 26,
            bottom: 40,
            showLabel: !0,
            textStyle: {
              color: "rgba(255,255,255,0.7)",
            },
            // 图例
            pieces: [
              {
                gt: 10000000,
                label: "> 10000000 人",
                color: "#5D0773",
              },
              {
                gte: 1000000,
                lte: 10000000,
                label: "1000000 - 10000000 人",
                color: "#26254F",
              },
              {
                gte: 100000,
                lt: 1000000,
                label: "100000 - 1000000 人",
                color: "#2D2D83",
              },
              {
                gt: 10000,
                lt: 100000,
                label: "10000 - 100000 人",
                color: "#2B4AD0",
              },
              {
                gte: 0,
                lt: 10000,
                label: "< 10000人",
                color: "#394064",
              },
            ],
            show: !0,
          },
          geo: {
            map: "world",
            roam: true, // 开启缩放和平移
            scaleLimit: {
              min: 1, // 最小缩放
              max: 30, // 最大缩放
            },
            zoom: 1.3, // 当前视角的缩放比例
            // top: 120,
            label: {
              normal: {
                //   show: !0,
                fontSize: "15",
                color: "rgba(255,255,255,0.7)",
              },
            },
            itemStyle: {
              normal: {
                //   color: "#FFF",
                areaColor: "#323c48",
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)", // 外发光
                borderColor: "rgba(0, 0, 0, 0.2)",
              },
              emphasis: {
                // color: "#FFF",
                areaColor: "#1E1D3C", // 悬浮区背景，就是鼠标移到区域上变的颜色
                // areaColor: '#2a333d',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0,
              },
            },
          },
          series: [
            {
              name: "确诊病例",
              type: "map",
              geoIndex: 0,
              data: maplist,
            },
          ],
        };
        // 找到画图的地儿
        var myChart = this.$echarts.init(document.querySelector(".map .chart"));
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 画左上角top10排名的函数
    async drawcountryCovRank() {
      // 向后端发请求（获取数据）
      let { data: res } = await this.$http.post(`bigscreen/countryrank`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给countryrankdata赋值
        this.countryrankdata = res.data.countryrank;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 对数据进行处理
        let countrydata = [];
        // 因为后端发送过来的数据直接就是排序完的，所以这里只需要遍历一下，在arr头部插入数据就行
        for (var i = 0; i < 9; i++) {
          // 过两遍JSON，不然拿到的是{observer}
          countrydata.unshift(
            JSON.parse(JSON.stringify(this.countryrankdata[i])).country
          );
        }
        // 同上，只不过这个处理的是确诊数据
        let covdata = [];
        for (var i = 0; i < 9; i++) {
          covdata.unshift(
            JSON.parse(JSON.stringify(this.countryrankdata[i])).count
          );
        }
        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".countrycovrank .chart")
        );
        // option是画图配置
        let option = {
          color: ["#2f89cf"],
          tooltip: {
            // 触发类型；轴触发，axis则鼠标hover到一条柱状图显示所有数据，item则鼠标hover到折线点显示相应数据
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          // 修改图表大小
          grid: {
            left: "0%",
            top: "4%",
            right: "4%",
            bottom: "4%",
            containLabel: true,
          },
          yAxis: {
            // type: "category",
            data: countrydata,
            type: "category",
            //修改刻度
            axisLabel: {
              color: "rgba(255,255,255)",
              fontSize: "12",
            },
            // y轴线条样式
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2,
                // type: "solid"
              },
            },
            // y 轴分隔线样式
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
          xAxis: {
            type: "value",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              // 设置单独的线条样式
              lineStyle: {
                color: "rgba(255,255,255,.6)",
                width: 1,
                type: "solid",
              },
            },
          },
          series: [
            {
              label: {
                show: true,
                position: "right",
                color: "rgba(255,255,255)",
              },
              data: covdata,
              type: "bar",
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 画米国新增折线图的函数
    async drawusaline() {
      // 向后端发请求（获取数据）
      let { data: res } = await this.$http.post(`bigscreen/usacovline`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给covline赋值
        this.usacovline = res.data.usacovline;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 对数据进行处理
        let datedata = [];
        // 因为后端发送过来的数据直接就是排序完的，所以这里只需要遍历一下，在arr头部插入数据就行
        for (var i = 0; i < this.usacovline.length; i++) {
          // 过两遍JSON，不然拿到的是{observer}
          datedata.push(JSON.parse(JSON.stringify(this.usacovline[i])).date);
        }
        // 同上
        let newdata = [];
        for (var i = 0; i < this.usacovline.length; i++) {
          newdata.push(JSON.parse(JSON.stringify(this.usacovline[i])).new);
        }
        // console.log(datedata);
        // console.log(newdata);
        let option = {
          visualMap: [
            {
              show: false,
              // type: 'continuous',
              // seriesIndex: 0,
              // min: 0,
              // max: 400
            },
          ],
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: false,
              },
              saveAsImage: {
                pixelRatio: 2,
              },
            },
          },
          // 修改图表大小
          grid: {
            left: "0%",
            top: "4%",
            right: "4%",
            bottom: "4%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category",
            data: datedata,
            axisLabel: {
              color: "rgba(255,255,255)",
            },
            // color: "#fff",
          },
          yAxis: {
            type: "value",
            axisLabel: {
              color: "rgba(255,255,255)",
            },
            // color: "#fff",
          },
          dataZoom: [
            {
              type: "inside",
              start: 0,
              end: 10,
            },
            {
              start: 0,
              end: 10,
            },
          ],
          series: [
            {
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    // 渐变颜色
                    {
                      offset: 0,
                      color: "red",
                    },
                    {
                      offset: 1,
                      color: "Orange",
                    },
                  ],
                  global: false,
                },
              },
              symbol: "none",
              name: "当日新增",
              data: newdata,
              type: "line",
              smooth: true,
            },
          ],
        };
        // console.log(count100data);
        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".covline .chart")
        );
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 画左边占比饼图的函数
    async drawleftProportion() {
      let { data: res } = await this.$http.post(`bigscreen/worldcountdata`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给countryrankdata赋值
        this.countworlddata = res.data.countworlddata;
      }
      let nowdata = [];
      nowdata = [
        {
          value: this.countworlddata[0].diag - this.countworlddata[0].cure,
          name: "未治愈",
        },
        {
          value: this.countworlddata[0].cure,
          name: "治愈",
        },
      ];
      this.$nextTick(() => {
        // 新建数组为Echarts要求的数据格式即可

        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".proportion .chart1")
        );
        // option是画图配置
        let option = {
          // 鼠标移上去显示一个小框框
          tooltip: {
            trigger: "item",
          },
          // 图片与两边的距离
          grid: {
            left: "0%",
            top: "4%",
            right: "4%",
            bottom: "4%",
            containLabel: true,
          },
          // 两个数据的颜色
          color: ["#2f89cf", "#3b663b"],
          // 图表标题以及放哪里
          title: {
            text: "治愈率",
            left: "center",
            bottom: "bottom",
            textStyle: {
              color: "#fff", //'red'，字体颜色
              fontStyle: "normal", //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
              fontWeight: "normal", //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
              fontSize: 10, //字体大小
              lineHeight: 10, //字体行高
            },
          },
          series: [
            {
              name: "治愈率",
              type: "pie",
              radius: ["40%", "65%"],
              avoidLabelOverlap: true,
              // 边框
              itemStyle: {
                borderRadius: 5,
                borderColor: "#fff",
                borderWidth: 0.5,
              },
              label: {
                show: false,
                position: "center", //放中间
                // padding: ["50%", "50%"],
                // fontSize: "10px", //字体大小
                formatter: "{d}%", //显示百分比
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "20px",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: nowdata,
              // 初始化echarts的动画效果
              animationType: "scale",
              animationEasing: "elasticOut",
              animationDelay: function (idx) {
                return Math.random() * 200;
              },
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 画右边占比饼图的函数
    async drawrightProportion() {
      let { data: res } = await this.$http.post(`bigscreen/worldcountdata`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给countryrankdata赋值
        this.countworlddata = res.data.countworlddata;
      }
      let nowdata = [];
      nowdata = [
        {
          value: this.countworlddata[0].diag - this.countworlddata[0].dead,
          name: "未死亡",
        },
        {
          value: this.countworlddata[0].dead,
          name: "死亡",
        },
      ];
      this.$nextTick(() => {
        // 新建数组为Echarts要求的数据格式即可

        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".proportion .chart2")
        );
        // option是画图配置
        let option = {
          // 鼠标移上去显示一个小框框
          tooltip: {
            trigger: "item",
          },
          // 图片与两边的距离
          grid: {
            left: "0%",
            top: "4%",
            right: "4%",
            bottom: "4%",
            containLabel: true,
          },
          // 两个数据的颜色
          color: ["#2f89cf", "#d32e58"],
          // 图表标题以及放哪里
          title: {
            text: "死亡率",
            left: "center",
            bottom: "bottom",
            textStyle: {
              color: "#fff", //'red'，字体颜色
              fontStyle: "normal", //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
              fontWeight: "normal", //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
              fontSize: 10, //字体大小
              lineHeight: 10, //字体行高
            },
          },
          series: [
            {
              name: "死亡率",
              type: "pie",
              radius: ["40%", "65%"],
              avoidLabelOverlap: true,
              // 边框
              itemStyle: {
                borderRadius: 5,
                borderColor: "#fff",
                borderWidth: 0.5,
              },
              label: {
                show: false,
                position: "center", //放中间
                // padding: ["50%", "50%"],
                // fontSize: "10px", //字体大小
                formatter: "{d}%", //显示百分比
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "20px",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: nowdata,
              // 初始化echarts的动画效果
              animationType: "scale",
              animationEasing: "elasticOut",
              animationDelay: function (idx) {
                return Math.random() * 200;
              },
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 获取新闻数据函数
    async getvacctable() {
      let { data: res } = await this.$http.post(`bigscreen/vacctable`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给covline赋值
        this.vacctable = res.data.vacctable;
      }
      this.$nextTick(() => {
        let newArr = [];
        for (var i = 0; i < this.vacctable.length; i++) {
          // 过两遍JSON，不然拿到的是{observer}
          newArr.push([
            JSON.parse(JSON.stringify(this.vacctable[i])).countryName,
            JSON.parse(JSON.stringify(this.vacctable[i])).vaccineType,
          ]);
        }
        this.newsConfig = {
          header: ["国家", "疫苗种类"],
          data: newArr,
          rowNum: 7, // 表行数
          headerBGC: "", // 表头背景色
          oddRowBGC: "", // 奇数行背景色
          evenRowBGC: "", // 偶数行背景色
          waitTime: 2000, // 轮播时间间隔(ms)
          align: "center",
          columnWidth: [100],
        };
      });
    },
    // 画右边疫苗排名的函数
    async drawWorldVacc() {
      // 向后端发请求（获取数据）
      let { data: res } = await this.$http.post(`bigscreen/vaccworld100`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给cityrankdata赋值
        this.vaccworld = res.data.vaccworld;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 对数据进行处理
        let countrydata = [];
        // 因为后端发送过来的数据直接就是排序完的，所以这里只需要遍历一下，在arr头部插入数据就行
        for (var i = 0; i < this.vaccworld.length; i++) {
          // 过两遍JSON，不然拿到的是{observer}
          countrydata.unshift(
            JSON.parse(JSON.stringify(this.vaccworld[i])).country
          );
        }
        // 同上
        let countdata = [];
        for (var i = 0; i < this.vaccworld.length; i++) {
          countdata.unshift(
            JSON.parse(JSON.stringify(this.vaccworld[i])).count / 1000000
          );
        }
        // 同上
        let count100data = [];
        for (var i = 0; i < this.vaccworld.length; i++) {
          count100data.unshift(
            JSON.parse(JSON.stringify(this.vaccworld[i])).count100
          );
        }
        // console.log(countrydata);
        // console.log(countdata);
        // console.log(count100data);
        let option = {
          // backgroundColor:"#293c55",
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "0%",
            // top: "0%",
            right: "10%",
            // bottom: "2%",
            containLabel: true,
          },
          legend: {
            itemWidth: 15, //设置legend图标的宽度
            itemHeight: 15, //设置legend图标的高度
            right: 60, //设置legend的位置
            // data: [
            // {name:"蒸发量",icon:"rect"},
            // {name:"降水量",icon:"rect"}
            // ],
            textStyle: {
              color: "rgba(255,255,255,.6)",
            },
          },
          calculable: true,
          yAxis: [
            {
              type: "category",
              data: countrydata,
              axisTick: {
                show: false,
              },
              splitLine: {
                //设置分割线
                show: true,
                lineStyle: {
                  color: "#ffffff",

                  type: "solid",
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
                interval: 0, //解决echarts数值因文字较多显示不全问题
              },
              axisLine: {
                // 设置轴线是否显示
                lineStyle: {
                  color: "#ffffff",
                },
              },
            },
          ],
          xAxis: [
            {
              // name: "(接种数/百人)",
              max: 400,
              interval: 100, //控制y轴的刻度
              type: "value",
              axisTick: {
                //控制y轴的刻度
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff",
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#ffffff",

                  type: "solid",
                },
              },
              nameTextStyle: {
                color: "#FFF",
              },
            },
            {
              // name: "(千万次)",
              min: 0,
              max: 200,

              // interval:20,  //控制y轴的分段
              type: "value",
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff",
                },
              },
              lineStyle: {
                color: ["#ffffff"],

                type: "solid",
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#ffffff",

                  type: "solid",
                },
              },
              nameTextStyle: {
                color: "#FFF",
              },
            },
          ],
          series: [
            {
              name: "接种剂次(万)",
              type: "bar",
              xAxisIndex: 1,
              data: countdata,
              itemStyle: {
                color: "#045c91",
              },
            },
            {
              name: "接种数/百人",
              type: "bar",

              data: count100data,

              itemStyle: {
                color: "#36b6fd",
              },
            },
          ],
        };
        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".covworld .chart")
        );
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 画右下角左边水滴图的函数
    async drawleftWater() {
      let { data: res } = await this.$http.post(`bigscreen/worldcountdata`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给countryrankdata赋值
        this.countworlddata = res.data.countworlddata;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 因为后端发送过来的数据直接就是排序完的，所以这里只需要遍历一下，在arr头部插入数据就行
        let newArr = [];
        for (var i = 0; i < this.countworlddata.length; i++) {
          // 过两遍JSON，不然拿到的是{observer}
          newArr.unshift([
            (
              JSON.parse(JSON.stringify(this.countworlddata[i])).dead /
              (JSON.parse(JSON.stringify(this.countworlddata[i])).diag -
                JSON.parse(JSON.stringify(this.countworlddata[i])).dead)
            ).toFixed(5),
          ]);
        }
        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".water .chart1")
        );
        // option是画图配置
        let option = {
          series: [
            {
              type: "liquidFill",
              data: newArr,
              label: {
                formatter: function (param) {
                  return "死亡率" + "\n" + param.value * 100 + "%";
                },
                fontSize: 10,
              },
              // 修改图表大小
              outline: {
                show: false,
              },
              shape: "circle",
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 画右下角右边水滴图的函数
    async drawrightWater() {
      let { data: res } = await this.$http.post(`bigscreen/vaccrateworld`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给covline赋值
        this.vaccrateworld = res.data.vaccrateworld;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        let newArr = [];
        for (var i = 0; i < this.vaccrateworld.length; i++) {
          // 过两遍JSON，不然拿到的是{observer}
          newArr.unshift(
            Number(
              JSON.parse(JSON.stringify(this.vaccrateworld[i])).inorate.toFixed(
                3
              )
            )
          );
        }
        // 让图片好看点 push两个图层
        newArr.push(0.3);
        newArr.push(0.2);
        // console.log(newArr);
        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".water .chart2")
        );
        // option是画图配置
        let option = {
          series: [
            {
              type: "liquidFill",
              data: newArr,
              label: {
                formatter: function (param) {
                  return "接种率" + "\n" + param.value * 100 + "%";
                },
                fontSize: 10,
              },
              // 修改图表大小
              outline: {
                show: false,
              },
              shape: "circle",
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    toManagerLogin() {
      this.$router.push("welcome");
    },
    toManagerChina() {
      this.$router.push("bigscreen");
    },
    changeWorldDataTableVisible() {
      this.worldDataTableVisible = true;
    },
    async getcountdata() {
      let { data: res } = await this.$http.post(`bigscreen/worldcountdata`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给countryrankdata赋值
        this.countworlddata = res.data.countworlddata;
      }
    },
    async getJpLine() {
      // 向后端发请求（获取数据）
      let { data: res } = await this.$http.post(`bigscreen/jpcovline`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给covline赋值
        this.jpcovline = res.data.jpcovline;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 对数据进行处理
        let datedata = [];
        // 因为后端发送过来的数据直接就是排序完的，所以这里只需要遍历一下，在arr头部插入数据就行
        for (var i = 0; i < this.jpcovline.length; i++) {
          // 过两遍JSON，不然拿到的是{observer}
          datedata.push(JSON.parse(JSON.stringify(this.jpcovline[i])).date);
        }
        // 同上
        let newdata = [];
        for (var i = 0; i < this.jpcovline.length; i++) {
          newdata.push(JSON.parse(JSON.stringify(this.jpcovline[i])).new);
        }
        let nowdata = [];
        for (var i = 0; i < this.jpcovline.length; i++) {
          nowdata.push(JSON.parse(JSON.stringify(this.jpcovline[i])).diagnosed);
        }
        let deaddata = [];
        for (var i = 0; i < this.jpcovline.length; i++) {
          deaddata.push(JSON.parse(JSON.stringify(this.jpcovline[i])).dead);
        }
        let curedata = [];
        for (var i = 0; i < this.jpcovline.length; i++) {
          curedata.push(JSON.parse(JSON.stringify(this.jpcovline[i])).cure);
        }
        console.log(newdata);
        let option = {
          color: ["green", "#a55e00", "#2f89cf", "#d32e58"],
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["新增", "确诊", "治愈", "死亡"],
            // textStyle: {
            //   color: "#ffffff",
            // },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            // axisLabel: {
            //   color: "rgba(255,255,255)",
            // },
            data: datedata,
          },
          yAxis: {
            type: "value",
            // axisLabel: {
            //   color: "rgba(255,255,255)",
            // },
          },
          series: [
            {
              name: "治愈",
              type: "line",
              // stack: 'Total',
              symbol: "none",
              data: curedata,
            },
            {
              name: "确诊",
              type: "line",
              // stack: 'Total',
              symbol: "none",
              data: nowdata,
            },
            {
              name: "新增",
              type: "line",
              // stack: 'Total',
              symbol: "none",
              data: newdata,
            },
            {
              name: "死亡",
              type: "line",
              // stack: 'Total',
              symbol: "none",
              data: deaddata,
            },
          ],
        };

        // console.log(count100data);
        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(document.querySelector(".jpLine"));
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });

      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      // this.$nextTick(() => {
      //   // 对数据进行处理
      //   let datedata = [];
      //   // 因为后端发送过来的数据直接就是排序完的，所以这里只需要遍历一下，在arr头部插入数据就行
      //   for (var i = 0; i < this.jpcovline.length; i++) {
      //     // 过两遍JSON，不然拿到的是{observer}
      //     datedata.push(JSON.parse(JSON.stringify(this.jpcovline[i])).date);
      //   }
      //   // 同上
      //   let newdata = [];
      //   for (var i = 0; i < this.jpcovline.length; i++) {
      //     newdata.push(JSON.parse(JSON.stringify(this.jpcovline[i])).new);
      //   }
      //   // console.log(datedata);
      //   // console.log(newdata);
      //   let option = {
      //     visualMap: [
      //       {
      //         show: false,
      //         // type: 'continuous',
      //         // seriesIndex: 0,
      //         // min: 0,
      //         // max: 400
      //       },
      //     ],
      //     toolbox: {
      //       feature: {
      //         dataZoom: {
      //           yAxisIndex: false,
      //         },
      //         saveAsImage: {
      //           pixelRatio: 2,
      //         },
      //       },
      //     },
      //     // 修改图表大小
      //     grid: {
      //       left: "0%",
      //       top: "4%",
      //       right: "4%",
      //       bottom: "4%",
      //       containLabel: true,
      //     },
      //     tooltip: {
      //       trigger: "axis",
      //     },
      //     xAxis: {
      //       type: "category",
      //       data: datedata,
      //       // axisLabel: {
      //       //   color: "rgba(255,255,255)",
      //       // },
      //       // color: "#fff",
      //     },
      //     yAxis: {
      //       type: "value",
      //       // axisLabel: {
      //       //   color: "rgba(255,255,255)",
      //       // },
      //       // color: "#fff",
      //     },
      //     dataZoom: [
      //       {
      //         type: "inside",
      //         start: 0,
      //         end: 10,
      //       },
      //       {
      //         start: 0,
      //         end: 10,
      //       },
      //     ],
      //     series: [
      //       {
      //         areaStyle: {
      //           color: {
      //             type: "linear",
      //             x: 0,
      //             y: 0,
      //             x2: 0,
      //             y2: 1,
      //             colorStops: [
      //               // 渐变颜色
      //               {
      //                 offset: 0,
      //                 color: "red",
      //               },
      //               {
      //                 offset: 1,
      //                 color: "Orange",
      //               },
      //             ],
      //             global: false,
      //           },
      //         },
      //         symbol: "none",
      //         name: "当日新增",
      //         data: newdata,
      //         type: "line",
      //         smooth: true,
      //       },
      //     ],
      //   };
      //   // console.log(count100data);
      //   // 开始画图，这句话是找到画图的地方
      //   var myChart = this.$echarts.init(document.querySelector(".jpLine"));
      //   myChart.setOption(option);
      //   window.addEventListener("resize", function () {
      //     myChart.resize();
      //   });
      // });
    },
    init() {
      if (screenfull.isEnabled) {
        screenfull.on("change", this.fullChange);
      }
    },
    //切换
    fullScreen() {
      if (!screenfull.isEnabled) {
        return false;
      }
      //全屏
      screenfull.toggle();
    },
    fullChange() {
      this.isFullscreen = screenfull.isFullscreen;
    },
    async changeVaccMapTableVisible() {
      this.worldVaccMapDialogVisible = true;

      let { data: res } = await this.$http.post(`bigscreen/vaccmapworlddata`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给cityrankdata赋值
        this.vaccmapdata = res.data.mapdata;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 对数据进行处理
        let maplist = [];
        // 新建数组为Echarts要求的数据格式即可
        for (var i = 0; i < this.vaccmapdata.length; i++) {
          maplist.unshift({
            value: JSON.parse(JSON.stringify(this.vaccmapdata[i]))
              .inoculateCount100,
            name: JSON.parse(JSON.stringify(this.vaccmapdata[i])).country,
          });
        }
        let option = {
          tooltip: {
            triggerOn: "click",
            formatter: function (e, t, n) {
              return 0.5 == e.value
                ? e.name + "：有疑似病例"
                : e.seriesName + "<br />" + e.name + "：" + e.value;
            },
          },
          title: {
            text: this.title,
            top: 50,
            left: "center",
            textStyle: {
              fontWeight: "bolder",
              fontSize: 24,
              color: "#BCBCBF",
            },
          },
          visualMap: {
            min: 0,
            max: 1000,
            left: 26,
            bottom: 40,
            showLabel: !0,
            textStyle: {
              color: "rgba(255,255,255,0.7)",
            },
            // 图例
            pieces: [
              {
                gt: 300,
                label: "> 300 接种剂次/百人",
                color: "#5D0773",
              },
              {
                gte: 200,
                lte: 300,
                label: "200 - 300 接种剂次/百人",
                color: "#26254F",
              },
              {
                gte: 100,
                lt: 200,
                label: "100 - 200 接种剂次/百人",
                color: "#2D2D83",
              },
              {
                gt: 50,
                lt: 100,
                label: "50 - 100 接种剂次/百人",
                color: "#2B4AD0",
              },
              {
                gte: 0,
                lt: 50,
                label: "< 50 接种剂次/百人",
                color: "#394064",
              },
            ],
            show: !0,
          },
          geo: {
            map: "world",
            roam: true, // 开启缩放和平移
            scaleLimit: {
              min: 1, // 最小缩放
              max: 30, // 最大缩放
            },
            zoom: 1.3, // 当前视角的缩放比例
            // top: 120,
            label: {
              normal: {
                //   show: !0,
                fontSize: "15",
                color: "rgba(255,255,255,0.7)",
              },
            },
            itemStyle: {
              normal: {
                //   color: "#FFF",
                areaColor: "#323c48",
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)", // 外发光
                borderColor: "rgba(0, 0, 0, 0.2)",
              },
              emphasis: {
                // color: "#FFF",
                areaColor: "#1E1D3C", // 悬浮区背景，就是鼠标移到区域上变的颜色
                // areaColor: '#2a333d',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0,
              },
            },
          },
          series: [
            {
              name: "接种剂次/百人",
              type: "map",
              geoIndex: 0,
              data: maplist,
            },
          ],
        };
        // 找到画图的地儿
        var myChart = this.$echarts.init(
          document.querySelector(".vaccworrldmap")
        );
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    async changeJpLineVisible() {
      this.jpLineDialogVisible = true;
      this.getJpLine();
    },
  },
  destroy() {
    if (screenfull.isEnabled) {
      screenfull.off("change", this.fullChange);
    }
  },
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
};
</script>


<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.jpLine {
  height: 8rem;
  background-color: #fff;
}
.vaccworrldmap {
  height: 11.5rem;
  background: url(./images/bg.jpg) no-repeat top center;
  // background-color: rgb(32, 55, 189);
}
.chartusa {
  height: 7rem;
  // background-color: pink;
}
.datepicker {
  // background-color: #000;
  /deep/ .el-input__inner {
    background-color: rgba(0, 0, 0, 0) !important;
    color: rgba(255, 255, 255, 0.7);
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
  }
}

li {
  list-style: none;
}

.bigscreen {
  background: url(./images/bg.jpg) no-repeat top center;
  line-height: 1.15;
}

.prefix-icon-class {
  display: none;
}

.head {
  position: relative;
  height: 1.25rem;
  background: url(./images/head_bg.png) no-repeat;
  background-size: 100% 100%;

  h1 {
    font-size: 0.475rem;

    color: #fff;
    text-align: center;
    line-height: 1rem;
  }

  .toManager {
    position: absolute;
    left: 0.375rem;
    top: 0;
    line-height: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.25rem;

    a {
      text-align: none;
      color: rgba(255, 255, 255, 0.7);
    }
  }

  .showTime {
    position: absolute;
    right: 0.375rem;
    top: 0;
    line-height: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.25rem;
  }
}

.mainbox {
  min-width: 1024px;
  max-width: 1920px;
  padding: 0.125rem 0.125rem 0;
  display: flex;

  .column {
    flex: 2.5;

    &:nth-child(2) {
      flex: 7;
      margin: 0 0.125rem 0.1875rem;
      overflow: hidden;
    }
  }
}

.panellong {
  position: relative;
  height: 5.8125rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(./images/line\(1\).png) rgba(255, 255, 255, 0.03);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }

  .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;

    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }

    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }

  h2 {
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    color: #fff;
    font-size: 0.2rem;
    font-weight: 400;
  }

  .chart {
    height: 5.4rem;
    // background-color: pink;
  }
}
.panelmid {
  position: relative;
  height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(./images/line\(1\).png) rgba(255, 255, 255, 0.03);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }

  .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;

    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }

    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }

  h2 {
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    color: #fff;
    font-size: 0.2rem;
    font-weight: 400;
  }

  .chart {
    height: 3rem;
    // background-color: pink;
  }
}
.panelsmall {
  position: relative;
  height: 1.9375rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(./images/line\(1\).png) rgba(255, 255, 255, 0.03);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;

  // .water-level-pond {
  //   align-content: center;
  // }
  // p {
  //   text-align: center;
  //   color: #fff;
  // }

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }

  .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;

    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }

    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }

  h2 {
    height: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    color: #fff;
    font-size: 0.2rem;
    font-weight: 400;
  }

  .chart1 {
    position: absolute;
    height: 1.5rem;
    width: 45%;
    // background-color: pink;
    left: 0.2rem;
  }
  .chart2 {
    // margin-left: 10px;
    position: absolute;
    height: 1.5rem;
    right: 0.2rem;
    width: 45%;
    // background-color: yellow;
  }
}

//no数字模块
/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(./font/D-DIN-Bold.ttf);
}

.el-input__inner {
  color: #ffffff;
  background: rgba(255, 255, 255, 0);
  border: 0px;
}

.no {
  background: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;

  .no-hd {
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);

    &::before {
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      top: 0;
      left: 0;
    }

    &::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      right: 0;
      bottom: 0;
    }

    ul {
      display: flex;

      li {
        position: relative;
        flex: 1;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.65rem;
        color: #ffffff;
        padding: 0.05rem 0;
        font-family: electronicFont;
        font-weight: bold;

        &::after {
          content: "";
          position: absolute;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
          right: 0;
          top: 25%;
        }
      }
      .dead {
        color: rgb(255, 123, 123);
      }
      .cure {
        color: rgb(138, 255, 138);
      }
      .new {
        color: #02a6b5;
      }
    }
  }

  .no-bd ul {
    display: flex;

    li {
      flex: 1;
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      font-size: 0.225rem;
      color: rgba(255, 255, 255, 0.7);
      padding-top: 0.125rem;
    }
  }
}

.map {
  position: relative;
  height: 10.125rem;

  .chart {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height: 10.125rem;
    width: 100%;
  }

  .map1,
  .map2,
  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.475rem;
    height: 6.475rem;
    background: url(./images/map.png) no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
  }

  .map2 {
    width: 8.0375rem;
    height: 8.0375rem;
    background-image: url(./images/lbx.png);
    opacity: 0.6;
    animation: rotate 15s linear infinite;
    z-index: 2;
  }

  .map3 {
    width: 7.075rem;
    height: 7.075rem;
    background-image: url(./images/jt.png);
    animation: rotate1 10s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes rotate1 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}
</style>